<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let option = {
      tooltip: {},
      series: [
        {
          type: "treemap", // 矩形树图允许有多个根节点，而树图只能允许一个根节点
          roma: true, // 拖拽缩放
          squareRatio: 4, // 宽高比例变换位置
        //   leafDepth: 1,  // 子节点展开下钻展开
          drillDownIcon: '▶️', // 下钻提示符号，只能是字符串
          colorAlpha: [0.3, 1], // 本系列颜色透明度下钻变化：值越小透明度越低
          colorSaturation: [0.3, 1], // 饱和度变化
          colorMappingBy: 'index', // 按什么来选择同组颜色 index | value | id
          visibleMin: 300, // 数据过小隐藏，针对数据量大的树图才有效果
          childrenVisibleMin: 200, // 子节点过小隐藏，同上
          breadcrumb:{
            show: false,   // 面包屑
          },
          upperLabel:{
            show: true   // 显示父节点
          },
          data: [
            {
              name: "a",
              value: 10,
              children: [
                {
                  name: "b1",
                  value: 5
                },
                {
                  name: "b2",
                  value: 5,
                  children: [
                    {
                      name: "c1",
                      value: 2,
                    },
                    {
                      name: "c2",
                      value: 3
                    },
                  ],
                },
              ],
            },
            {
                name: 'other',
                value: 10,
                children: [
                    {
                        name: 'son1',
                        value: 8,
                    },
                    {
                        name: 'son2',
                        value: 2
                    }
                ]
            }
          ],
        },
      ],
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  